import { useCatStore } from "../stores/catStore";
import { useShallow } from "zustand/shallow";

export const CatController = () => {
  // const { increaseBigCats, increaseSmallCats } = useCatStore()
  // const increaseBigCats = useCatStore.use.increaseBigCats()
  // const increaseSmallCats = useCatStore.use.increaseSmallCats()
  const [increaseBigCats, increaseSmallCats] = useCatStore(
    useShallow((state) => [state.increaseBigCats, state.increaseSmallCats])
  );
  return (
    <div className="box">
      <h1>Cat Controller</h1>
      {/* <p>big cats: {bigCats}</p>
      <p>small cats: {smallCats}</p>
      <p>{summary()}</p> */}
      <p>测试重渲染：{Math.random()}</p>
      <div>
        <button onClick={increaseBigCats}>add big cat</button>
        <button onClick={increaseSmallCats}>add small cat</button>
      </div>
    </div>
  );
};
